<template>
    <page-view class="choose-food-page">
        <page-header title="小蒋订餐">
            <span class="iconfont iconxiazai" v-if="!userInfo" @click="$router.push({name:'Login'})"></span>
        </page-header>
        <div class="content-box" ref="contentBoxDOM" @scroll="getScrollTop($event)">
            <div class="banner-box">
                <index-swiper :src-list="bannerImgList"></index-swiper>
                <div class="search-box" @click="$router.push({name:'SearchFoods'})">
                    <input type="text" class="search-text" readonly placeholder="广告位出租哦！！！">
                    <button type="button" class="search-btn">搜索</button>
                </div>
            </div>
            <div class="foods-list">
                <foods-item v-for="(item,index) in foodsList" :key="index" :foods-data="item"></foods-item>
            </div>
        </div>
    </page-view>
</template>
<script>
    import FoodsItem from "@/components/FoodsItem";
    import {
        mapState
    } from "vuex";
    export default {
        name: "ChooseFood",
        components: {
            FoodsItem
        },
        data() {
            return {
                foodsList: [],
                bannerImgList: [],
                scrollTop: 0
            }
        },
        created() {
            this.getFoodsList();
        },
        // 当页面重新被激活的时候，scrollTop赋值为原来的值
        activated() {
            this.$refs.contentBoxDOM.scrollTop = this.scrollTop;
        },
        computed: {
            ...mapState(["userInfo"])
        },
        methods: {
            async getFoodsList() {
                const MsgPrompt = this.$msg.loading({
                    title: "正在加载中",
                    duration: -1,
                    hasMask: true,
                    position: "center"
                });
                try {
                    let result = await this.$api.foods.getFoodsList();
                    //成功
                    this.foodsList = result.data;
                    //随机取4张图片当成轮播图的图片
                    let randomArr = [];
                    while (randomArr.length < 4) {
                        let num = parseInt(Math.random() * this.foodsList.length);
                        if (randomArr.indexOf(num) == -1) {
                            randomArr.push(num);
                        }
                    }
                    randomArr.forEach((item) => {
                        this.bannerImgList.push({
                            img: result.data[item].img,
                            fid: result.data[item].fid
                        });
                    });
                } catch (error) {
                    MsgPrompt.error("数据加载失败");
                } finally {
                    MsgPrompt.close();
                }
            },
            getScrollTop(event) {
                this.scrollTop = event.target.scrollTop;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .choose-food-page {
        @include flexbox(column);


        .content-box {
            flex: 1;
            overflow: auto;
            margin-bottom: 55px;

            .banner-box {
                height: 200px;
                width: 100%;
                position: relative;

                .search-box {
                    position: absolute;
                    @include flexbox(row);
                    top: 20px;
                    left: 20px;
                    right: 20px;
                    z-index: 10;
                    height: 30px;
                    border-radius: 30px;
                    overflow: hidden;

                    .search-text {
                        flex: 1;
                        border: none;
                        outline: none;
                        padding: 0 15px;
                    }

                    .search-btn {
                        width: 50px;
                        border: none;
                        outline: none;
                    }
                }
            }
        }
    }
</style>